<template>
  <div class="map-chart">
    <div id="container" ref="container" />
    <div id="myPageTop">
      <table>
        <tr>
          <td>
            <label>请输入关键字：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input id="tipinput">
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.4.15&key=c9dd97be6fc43bca56ee47b0599210fc&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"
></script>
<script>
export default {
  name: "TheMap",
  props: {
    lngLatCode: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      map: null, // 地图实例
      geocoder: null, // 地理对象
      marker: null, // 标点对象
      placeSearch: null,
      address: {}, // 详细地址
      lnglat: [] // 经纬度
    };
  },
  mounted () {
    // this.initMap();
  },
  methods: {
    // 初始化地图组件
    initMap (option) {
      // console.log('执行初始化', this.lngLatCode)
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: this.lngLatCode,// 初始坐标
        zoom: 15,
        zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
      });

      if (option == "map") {
        this.positioning();
      } else {
        this.map.plugin("AMap.Geocoder", () => {
          this.geocoder = new AMap.Geocoder({
            city: "010",
            redius: 1000
          });
        });
        const that = this;
        this.map.on("click", function (e) {
          let arr = [e.lnglat.getLng(), e.lnglat.getLat()];
          let lnglat = arr.toString().split(",");
          that.getAddress(lnglat);
        });
        this.addMarker(this.lngLatCode);
        this.searchMap(this.map);
      }
    },
    // 获取地址
    getAddress (lnglat) {
      this.map.add(this.marker);
      this.marker.setPosition(lnglat);
      this.lnglat = lnglat;
      this.geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          console.log(result.regeocode);
          this.address = {
            address: result.regeocode.formattedAddress,
            ragio: result.regeocode.addressComponent
          };
          this.$emit("toAddress", this.address);
          this.$emit("clickOn", this.lnglat);
        } else {
          // log.error("根据经纬度查询地址失败");
          console.log("根据经纬度查询地址失败");
        }
      });
    },
    // 实例化点标记
    addMarker (lnglat) {
      // console.log('初始化标点', lnglat)
      this.marker = new AMap.Marker({
        position: lnglat,
        offset: new AMap.Pixel(-13, -30)
      });
      this.marker.setMap(this.map);
    },
    searchMap (map) {
      const _this = this;
      AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], () => {
        //输入提示
        var autoOptions = {
          input: "tipinput"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        this.placeSearch = new AMap.PlaceSearch({
          map: map
        }); //构造地点查询类
        AMap.event.addListener(auto, "select", this.select); //注册
        AMap.event.addListener(this.placeSearch, "markerClick", function (e) {
          _this.$emit("bMapDate", e.data.location.lng, e.data.location.lat);
        });
      });
    },
    select (e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },
    positioning () {
      this.map.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
        });
        this.map.addControl(geolocation);
        geolocation.getCurrentPosition((status, result) => {
          if (status == "complete") {
            this.onComplete(result);
          } else {
            this.onError(result);
          }
        });
      });
    },
    onComplete (data) {
      let address = {
        formattedAddress: data.formattedAddress,
        lat: data.position.lat,
        lng: data.position.lng
      };
      this.$emit("toAddress", address);
      this.$message("定位成功");
    },
    //解析定位错误信息
    onError (data) {
      console.log(data);
      this.$message("定位失败");
    }
  }
};
</script>

<style lang="scss">
.map {
  height: 100%;
  width: 100%;
  float: left;
}
.map-chart {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  height: 300px;
  border: 1px #dddddd solid;
}

#container {
  margin-bottom: 15px;
  width: 100%;
  height: 300px;
  border: 1px #dddddd solid;
  z-index: 99;
}
#myPageTop {
  position: absolute;
  top: 5px;
  right: 10px;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #ccc;
  margin: 10px auto;
  padding: 6px;
  font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
  font-size: 14px;
  z-index: 99;
}
#myPageTop label {
  margin: 0 20px 0 0;
  color: #666666;
  font-weight: normal;
}
#myPageTop input {
  width: 170px;
}
#myPageTop .column2 {
  padding-left: 25px;
}
.amap-sug-result {
  z-index: 9999;
}
</style>
